<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地表水质量查询 - 浙政钉</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1890ff',
                        'gov-blue': '#2563eb',
                        'gov-green': '#059669',
                        'gov-red': '#dc2626'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50">
    <div class="min-h-screen">
        <!-- 页面头部 -->
        <header class="bg-white shadow-sm sticky top-0 z-10">
            <div class="flex items-center justify-between p-4">
                <div class="flex items-center space-x-3">
                    <button onclick="goBack()" class="text-gray-600">
                        <i class="fas fa-arrow-left text-lg"></i>
                    </button>
                    <h1 class="text-lg font-semibold text-gray-800">地表水质量</h1>
                </div>
                <div class="flex items-center space-x-3">
                    <button onclick="toggleView()" class="text-gray-600">
                        <i class="fas fa-th text-lg"></i>
                    </button>
                    <button onclick="refreshData()" class="text-gray-600">
                        <i class="fas fa-sync-alt text-lg"></i>
                    </button>
                </div>
            </div>
        </header>

        <div class="p-4">
            <!-- 实时水质概览 -->
            <div class="bg-gradient-to-r from-blue-500 to-blue-600 rounded-xl p-4 mb-6 text-white">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="text-lg font-bold">宁海县地表水质量</h2>
                        <div class="flex items-center space-x-4 mt-2">
                            <div>
                                <span class="text-lg font-bold">二类</span>
                                <span class="text-blue-100 ml-1">水质</span>
                            </div>
                            <div>
                                <span class="text-sm text-blue-100">优秀</span>
                                <p class="text-xs text-blue-100">综合达标率：92.8%</p>
                            </div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                            <i class="fas fa-tint text-2xl"></i>
                        </div>
                        <p class="text-xs text-blue-100 mt-1">2024-01-15 14:00</p>
                    </div>
                </div>
            </div>

            <!-- 水质监测因子 -->
            <div class="mb-6">
                <h3 class="text-base font-semibold text-gray-800 mb-3">监测因子</h3>
                <div class="grid grid-cols-3 gap-3">
                    <div class="card text-center cursor-pointer" onclick="selectFactor('pH')">
                        <div class="text-lg font-bold text-green-600">7.2</div>
                        <div class="text-xs text-gray-500">pH值</div>
                        <div class="text-xs text-green-600 mt-1">正常</div>
                    </div>
                    <div class="card text-center cursor-pointer" onclick="selectFactor('DO')">
                        <div class="text-lg font-bold text-blue-600">8.5</div>
                        <div class="text-xs text-gray-500">溶解氧</div>
                        <div class="text-xs text-blue-600 mt-1">mg/L</div>
                    </div>
                    <div class="card text-center cursor-pointer" onclick="selectFactor('TEMP')">
                        <div class="text-lg font-bold text-cyan-600">12.8</div>
                        <div class="text-xs text-gray-500">水温</div>
                        <div class="text-xs text-cyan-600 mt-1">℃</div>
                    </div>
                    <div class="card text-center cursor-pointer" onclick="selectFactor('NH3N')">
                        <div class="text-lg font-bold text-green-600">0.15</div>
                        <div class="text-xs text-gray-500">氨氮</div>
                        <div class="text-xs text-green-600 mt-1">mg/L</div>
                    </div>
                    <div class="card text-center cursor-pointer" onclick="selectFactor('TN')">
                        <div class="text-lg font-bold text-yellow-600">1.85</div>
                        <div class="text-xs text-gray-500">总氮</div>
                        <div class="text-xs text-yellow-600 mt-1">mg/L</div>
                    </div>
                    <div class="card text-center cursor-pointer" onclick="selectFactor('TP')">
                        <div class="text-lg font-bold text-green-600">0.08</div>
                        <div class="text-xs text-gray-500">总磷</div>
                        <div class="text-xs text-green-600 mt-1">mg/L</div>
                    </div>
                </div>
            </div>

            <!-- 功能导航 -->
            <div class="grid grid-cols-2 gap-4 mb-6">
                <div class="card cursor-pointer hover:shadow-lg" onclick="showGISMapModal()">
                    <div class="text-center">
                        <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-map text-blue-600 text-xl"></i>
                        </div>
                        <h3 class="font-semibold text-gray-800">GIS地图</h3>
                        <p class="text-gray-500 text-sm mt-1">监测站点分布</p>
                    </div>
                </div>
                <div class="card cursor-pointer hover:shadow-lg" onclick="showWaterRankingModal()">
                    <div class="text-center">
                        <div class="w-12 h-12 bg-cyan-100 rounded-xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-trophy text-cyan-600 text-xl"></i>
                        </div>
                        <h3 class="font-semibold text-gray-800">水质排行榜</h3>
                        <p class="text-gray-500 text-sm mt-1">各级别水体排名</p>
                    </div>
                </div>
                <div class="card cursor-pointer hover:shadow-lg" onclick="showComplianceRateModal()">
                    <div class="text-center">
                        <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-chart-pie text-green-600 text-xl"></i>
                        </div>
                        <h3 class="font-semibold text-gray-800">达标率统计</h3>
                        <p class="text-gray-500 text-sm mt-1">饮用水、地表水达标率</p>
                    </div>
                </div>
                <div class="card cursor-pointer hover:shadow-lg" onclick="showWaterMapModal()">
                    <div class="text-center">
                        <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-layer-group text-purple-600 text-xl"></i>
                        </div>
                        <h3 class="font-semibold text-gray-800">水质地图</h3>
                        <p class="text-gray-500 text-sm mt-1">实时水质等级展示</p>
                    </div>
                </div>
            </div>

            <!-- 水质等级说明 -->
            <div class="mb-6">
                <h3 class="text-base font-semibold text-gray-800 mb-3">水质等级说明</h3>
                <div class="grid grid-cols-2 gap-2">
                    <div class="flex items-center space-x-2 p-2 bg-white rounded-lg">
                        <div class="w-3 h-3 bg-blue-500 rounded-full"></div>
                        <span class="text-sm font-medium">一、二类水质</span>
                        <span class="text-xs text-gray-500">优秀</span>
                    </div>
                    <div class="flex items-center space-x-2 p-2 bg-white rounded-lg">
                        <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                        <span class="text-sm font-medium">三类水质</span>
                        <span class="text-xs text-gray-500">良好</span>
                    </div>
                    <div class="flex items-center space-x-2 p-2 bg-white rounded-lg">
                        <div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
                        <span class="text-sm font-medium">四类水质</span>
                        <span class="text-xs text-gray-500">轻度污染</span>
                    </div>
                    <div class="flex items-center space-x-2 p-2 bg-white rounded-lg">
                        <div class="w-3 h-3 bg-orange-500 rounded-full"></div>
                        <span class="text-sm font-medium">五类水质</span>
                        <span class="text-xs text-gray-500">中度污染</span>
                    </div>
                    <div class="flex items-center space-x-2 p-2 bg-white rounded-lg">
                        <div class="w-3 h-3 bg-red-500 rounded-full"></div>
                        <span class="text-sm font-medium">劣五类水质</span>
                        <span class="text-xs text-gray-500">重度污染</span>
                    </div>
                </div>
            </div>

            <!-- 监测站点水质状态 -->
            <div class="mb-6">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-base font-semibold text-gray-800">监测站点水质</h3>
                    <select class="text-sm border rounded px-2 py-1" onchange="switchTimeframe(this.value)">
                        <option value="latest">最新数据</option>
                        <option value="daily">日均值</option>
                        <option value="monthly">月均值</option>
                    </select>
                </div>
                <div class="space-y-3" id="stationList">
                    <div class="card">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-3">
                                <div class="w-3 h-3 bg-blue-500 rounded-full"></div>
                                <div>
                                    <h4 class="font-medium text-gray-800">宁海某某水库</h4>
                                    <p class="text-sm text-gray-500">跃龙街道</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <span class="badge water-excellent">二类水质</span>
                                <p class="text-xs text-gray-500 mt-1">2024-01-15 14:00</p>
                            </div>
                        </div>
                        <div class="mt-3 grid grid-cols-4 gap-2 text-xs">
                            <div class="text-center">
                                <div class="text-green-600 font-medium">7.2</div>
                                <div class="text-gray-500">pH</div>
                            </div>
                            <div class="text-center">
                                <div class="text-blue-600 font-medium">8.5</div>
                                <div class="text-gray-500">DO</div>
                            </div>
                            <div class="text-center">
                                <div class="text-green-600 font-medium">0.15</div>
                                <div class="text-gray-500">氨氮</div>
                            </div>
                            <div class="text-center">
                                <div class="text-green-600 font-medium">0.08</div>
                                <div class="text-gray-500">总磷</div>
                            </div>
                        </div>
                        <div class="mt-3 flex space-x-2">
                            <button onclick="viewStationDetail('station1')" class="btn btn-outline text-xs px-2 py-1">详细信息</button>
                            <button onclick="showTrend('station1')" class="btn btn-primary text-xs px-2 py-1">变化趋势</button>
                        </div>
                    </div>

                    <div class="card">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-3">
                                <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                                <div>
                                    <h4 class="font-medium text-gray-800">某某河监测断面</h4>
                                    <p class="text-sm text-gray-500">桃源街道</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <span class="badge water-good">三类水质</span>
                                <p class="text-xs text-gray-500 mt-1">2024-01-15 14:00</p>
                            </div>
                        </div>
                        <div class="mt-3 grid grid-cols-4 gap-2 text-xs">
                            <div class="text-center">
                                <div class="text-green-600 font-medium">7.5</div>
                                <div class="text-gray-500">pH</div>
                            </div>
                            <div class="text-center">
                                <div class="text-blue-600 font-medium">7.2</div>
                                <div class="text-gray-500">DO</div>
                            </div>
                            <div class="text-center">
                                <div class="text-yellow-600 font-medium">0.85</div>
                                <div class="text-gray-500">氨氮</div>
                            </div>
                            <div class="text-center">
                                <div class="text-green-600 font-medium">0.12</div>
                                <div class="text-gray-500">总磷</div>
                            </div>
                        </div>
                        <div class="mt-3 flex space-x-2">
                            <button onclick="viewStationDetail('station2')" class="btn btn-outline text-xs px-2 py-1">详细信息</button>
                            <button onclick="showTrend('station2')" class="btn btn-primary text-xs px-2 py-1">变化趋势</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 达标率概览 -->
            <div class="mb-6">
                <h3 class="text-base font-semibold text-gray-800 mb-3">达标率概览</h3>
                <div class="grid grid-cols-2 gap-4">
                    <div class="card">
                        <h4 class="font-medium text-gray-800 mb-3">饮用水源地达标率</h4>
                        <div class="text-center">
                            <div class="w-16 h-16 mx-auto mb-2 relative">
                                <svg class="w-16 h-16 transform -rotate-90" viewBox="0 0 64 64">
                                    <circle cx="32" cy="32" r="28" stroke="#e5e7eb" stroke-width="8" fill="none"/>
                                    <circle cx="32" cy="32" r="28" stroke="#2563eb" stroke-width="8" fill="none" 
                                        stroke-dasharray="175.93" stroke-dashoffset="17.59"/>
                                </svg>
                                <div class="absolute inset-0 flex items-center justify-center">
                                    <span class="text-lg font-bold text-gray-800">90%</span>
                                </div>
                            </div>
                            <p class="text-sm text-gray-600">本月达标率</p>
                            <p class="text-xs text-blue-600 mt-1">
                                <i class="fas fa-arrow-up"></i> +2.5%
                            </p>
                        </div>
                    </div>
                    <div class="card">
                        <h4 class="font-medium text-gray-800 mb-3">地表水达标率</h4>
                        <div class="text-center">
                            <div class="w-16 h-16 mx-auto mb-2 relative">
                                <svg class="w-16 h-16 transform -rotate-90" viewBox="0 0 64 64">
                                    <circle cx="32" cy="32" r="28" stroke="#e5e7eb" stroke-width="8" fill="none"/>
                                    <circle cx="32" cy="32" r="28" stroke="#059669" stroke-width="8" fill="none" 
                                        stroke-dasharray="175.93" stroke-dashoffset="14.07"/>
                                </svg>
                                <div class="absolute inset-0 flex items-center justify-center">
                                    <span class="text-lg font-bold text-gray-800">92%</span>
                                </div>
                            </div>
                            <p class="text-sm text-gray-600">本月达标率</p>
                            <p class="text-xs text-green-600 mt-1">
                                <i class="fas fa-arrow-up"></i> +1.8%
                            </p>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>

    <!-- 弹窗系统 -->
    <!-- GIS地图弹窗 -->
    <div id="gisMapModal" class="modal-overlay">
        <div class="modal-container">
            <div class="modal-header">
                <h3 class="modal-title">地表水监测站点GIS地图</h3>
                <button class="modal-close" onclick="closeModal('gisMapModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="bg-gray-100 rounded-lg h-64 flex items-center justify-center">
                    <div class="text-center">
                        <i class="fas fa-map-marked-alt text-4xl text-gray-400 mb-2"></i>
                        <p class="text-gray-500">地图加载中...</p>
                        <p class="text-sm text-gray-400 mt-2">显示各乡镇街道监测站点</p>
                    </div>
                </div>
                <div class="mt-4 grid grid-cols-5 gap-2">
                    <div class="flex items-center">
                        <div class="w-3 h-3 bg-blue-500 rounded-full mr-1"></div>
                        <span class="text-xs">优秀</span>
                    </div>
                    <div class="flex items-center">
                        <div class="w-3 h-3 bg-green-500 rounded-full mr-1"></div>
                        <span class="text-xs">良好</span>
                    </div>
                    <div class="flex items-center">
                        <div class="w-3 h-3 bg-yellow-500 rounded-full mr-1"></div>
                        <span class="text-xs">轻度污染</span>
                    </div>
                    <div class="flex items-center">
                        <div class="w-3 h-3 bg-orange-500 rounded-full mr-1"></div>
                        <span class="text-xs">中度污染</span>
                    </div>
                    <div class="flex items-center">
                        <div class="w-3 h-3 bg-red-500 rounded-full mr-1"></div>
                        <span class="text-xs">重度污染</span>
                    </div>
                </div>
                <div class="mt-4">
                    <h4 class="font-medium text-gray-700 mb-2">站点列表</h4>
                    <div class="space-y-2 max-h-48 overflow-y-auto">
                        <div class="flex items-center justify-between p-2 bg-gray-50 rounded cursor-pointer" onclick="focusStation('station1')">
                            <span class="text-sm">宁海某某水库</span>
                            <div class="flex items-center space-x-2">
                                <span class="badge water-excellent">二类</span>
                                <i class="fas fa-map-marker-alt text-blue-500"></i>
                            </div>
                        </div>
                        <div class="flex items-center justify-between p-2 bg-gray-50 rounded cursor-pointer" onclick="focusStation('station2')">
                            <span class="text-sm">某某河监测断面</span>
                            <div class="flex items-center space-x-2">
                                <span class="badge water-good">三类</span>
                                <i class="fas fa-map-marker-alt text-green-500"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" onclick="closeModal('gisMapModal')">关闭</button>
                <button class="btn btn-primary" onclick="exportMapData()">导出数据</button>
            </div>
        </div>
    </div>

    <!-- 水质排行榜弹窗 -->
    <div id="waterRankingModal" class="modal-overlay">
        <div class="modal-container">
            <div class="modal-header">
                <h3 class="modal-title">水质排行榜</h3>
                <button class="modal-close" onclick="closeModal('waterRankingModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="flex items-center justify-between mb-4">
                    <h4 class="font-medium">排名统计</h4>
                    <select class="text-sm border rounded px-2 py-1" onchange="changeRankingType(this.value)">
                        <option value="latest">最新数据</option>
                        <option value="daily">日均值</option>
                        <option value="monthly">月均值</option>
                    </select>
                </div>
                <div class="space-y-3">
                    <div class="flex items-center space-x-3 p-3 bg-blue-50 rounded-lg">
                        <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
                            <span class="text-white font-bold text-sm">1</span>
                        </div>
                        <div class="flex-1">
                            <div class="font-medium">宁海某某水库</div>
                            <div class="text-sm text-gray-500">二类水质 | 综合指数: 0.85</div>
                        </div>
                        <span class="badge water-excellent">二类</span>
                    </div>
                    <div class="flex items-center space-x-3 p-3 bg-green-50 rounded-lg">
                        <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
                            <span class="text-white font-bold text-sm">2</span>
                        </div>
                        <div class="flex-1">
                            <div class="font-medium">某某河监测断面</div>
                            <div class="text-sm text-gray-500">三类水质 | 综合指数: 0.72</div>
                        </div>
                        <span class="badge water-good">三类</span>
                    </div>
                    <div class="flex items-center space-x-3 p-3 bg-yellow-50 rounded-lg">
                        <div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center">
                            <span class="text-white font-bold text-sm">3</span>
                        </div>
                        <div class="flex-1">
                            <div class="font-medium">某某溪监测点</div>
                            <div class="text-sm text-gray-500">四类水质 | 综合指数: 0.65</div>
                        </div>
                        <span class="badge water-light">四类</span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" onclick="closeModal('waterRankingModal')">关闭</button>
                <button class="btn btn-primary" onclick="exportRankingData()">导出数据</button>
            </div>
        </div>
    </div>

    <!-- 达标率统计弹窗 -->
    <div id="complianceRateModal" class="modal-overlay">
        <div class="modal-container">
            <div class="modal-header">
                <h3 class="modal-title">达标率统计</h3>
                <button class="modal-close" onclick="closeModal('complianceRateModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="space-y-4">
                    <div>
                        <h4 class="font-medium text-gray-700 mb-3">饮用水源地达标率</h4>
                        <div class="grid grid-cols-2 gap-4">
                            <div class="text-center">
                                <div class="w-16 h-16 mx-auto mb-2 relative">
                                    <svg class="w-16 h-16 transform -rotate-90" viewBox="0 0 64 64">
                                        <circle cx="32" cy="32" r="28" stroke="#e5e7eb" stroke-width="8" fill="none"/>
                                        <circle cx="32" cy="32" r="28" stroke="#059669" stroke-width="8" fill="none" 
                                            stroke-dasharray="175.93" stroke-dashoffset="14.07"/>
                                    </svg>
                                    <div class="absolute inset-0 flex items-center justify-center">
                                        <span class="text-lg font-bold text-gray-800">92%</span>
                                    </div>
                                </div>
                                <p class="text-sm text-gray-600">本月达标率</p>
                            </div>
                            <div class="text-center">
                                <div class="w-16 h-16 mx-auto mb-2 relative">
                                    <svg class="w-16 h-16 transform -rotate-90" viewBox="0 0 64 64">
                                        <circle cx="32" cy="32" r="28" stroke="#e5e7eb" stroke-width="8" fill="none"/>
                                        <circle cx="32" cy="32" r="28" stroke="#3b82f6" stroke-width="8" fill="none" 
                                            stroke-dasharray="175.93" stroke-dashoffset="35.19"/>
                                    </svg>
                                    <div class="absolute inset-0 flex items-center justify-center">
                                        <span class="text-lg font-bold text-gray-800">80%</span>
                                    </div>
                                </div>
                                <p class="text-sm text-gray-600">地表水达标率</p>
                            </div>
                        </div>
                    </div>
                    <div>
                        <h4 class="font-medium text-gray-700 mb-3">水质类别分布</h4>
                        <div class="space-y-2">
                            <div class="flex items-center justify-between p-2 bg-blue-50 rounded">
                                <span class="text-sm">一、二类水质</span>
                                <span class="font-medium text-blue-600">65%</span>
                            </div>
                            <div class="flex items-center justify-between p-2 bg-green-50 rounded">
                                <span class="text-sm">三类水质</span>
                                <span class="font-medium text-green-600">25%</span>
                            </div>
                            <div class="flex items-center justify-between p-2 bg-yellow-50 rounded">
                                <span class="text-sm">四类水质</span>
                                <span class="font-medium text-yellow-600">8%</span>
                            </div>
                            <div class="flex items-center justify-between p-2 bg-orange-50 rounded">
                                <span class="text-sm">五类及以下</span>
                                <span class="font-medium text-orange-600">2%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" onclick="closeModal('complianceRateModal')">关闭</button>
                <button class="btn btn-primary" onclick="exportComplianceData()">导出数据</button>
            </div>
        </div>
    </div>

    <!-- 水质地图弹窗 -->
    <div id="waterMapModal" class="modal-overlay">
        <div class="modal-container">
            <div class="modal-header">
                <h3 class="modal-title">实时水质等级展示</h3>
                <button class="modal-close" onclick="closeModal('waterMapModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="bg-gray-100 rounded-lg h-64 flex items-center justify-center">
                    <div class="text-center">
                        <i class="fas fa-layer-group text-4xl text-gray-400 mb-2"></i>
                        <p class="text-gray-500">水质地图加载中...</p>
                        <p class="text-sm text-gray-400 mt-2">实时显示各监测点水质等级</p>
                    </div>
                </div>
                <div class="mt-4">
                    <h4 class="font-medium text-gray-700 mb-2">监测点详情</h4>
                    <div class="space-y-2">
                        <div class="flex items-center justify-between p-2 bg-blue-50 rounded cursor-pointer" onclick="showStationDetail('station1')">
                            <span class="text-sm">宁海某某水库</span>
                            <div class="flex items-center space-x-2">
                                <span class="badge water-excellent">二类</span>
                                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                            </div>
                        </div>
                        <div class="flex items-center justify-between p-2 bg-green-50 rounded cursor-pointer" onclick="showStationDetail('station2')">
                            <span class="text-sm">某某河监测断面</span>
                            <div class="flex items-center space-x-2">
                                <span class="badge water-good">三类</span>
                                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" onclick="closeModal('waterMapModal')">关闭</button>
                <button class="btn btn-primary" onclick="exportWaterMapData()">导出数据</button>
            </div>
        </div>
    </div>

    <script>
        function goBack() {
            parent.postMessage({type: 'navigate', page: 'home.html'}, '*');
        }

        function toggleView() {
            showNotification('切换显示模式', 'info');
        }

        function refreshData() {
            showNotification('数据已刷新', 'success');
        }

        function selectFactor(factor) {
            showNotification(`查看${factor}详细数据`, 'info');
        }

        function switchTimeframe(timeframe) {
            const labels = {
                'latest': '最新数据',
                'daily': '日均值',
                'monthly': '月均值'
            };
            showNotification(`切换到${labels[timeframe]}`, 'info');
        }

        function showGISMap() {
            const mainContent = document.getElementById('mainContent');
            mainContent.className = 'block';
            mainContent.innerHTML = `
                <div class="card">
                    <h3 class="font-semibold text-gray-800 mb-4">地表水监测站点GIS地图</h3>
                    <div class="bg-gray-100 rounded-lg h-64 flex items-center justify-center">
                        <div class="text-center">
                            <i class="fas fa-map-marked-alt text-4xl text-gray-400 mb-2"></i>
                            <p class="text-gray-500">地图加载中...</p>
                            <p class="text-sm text-gray-400 mt-2">显示各乡镇街道监测站点</p>
                        </div>
                    </div>
                    <div class="mt-4 grid grid-cols-5 gap-2">
                        <div class="flex items-center">
                            <div class="w-3 h-3 bg-blue-500 rounded-full mr-1"></div>
                            <span class="text-xs">优秀</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-3 h-3 bg-green-500 rounded-full mr-1"></div>
                            <span class="text-xs">良好</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-3 h-3 bg-yellow-500 rounded-full mr-1"></div>
                            <span class="text-xs">轻度污染</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-3 h-3 bg-orange-500 rounded-full mr-1"></div>
                            <span class="text-xs">中度污染</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-3 h-3 bg-red-500 rounded-full mr-1"></div>
                            <span class="text-xs">重度污染</span>
                        </div>
                    </div>
                    <div class="mt-4">
                        <h4 class="font-medium text-gray-700 mb-2">站点列表</h4>
                        <div class="space-y-2 max-h-48 overflow-y-auto">
                            <div class="flex items-center justify-between p-2 bg-gray-50 rounded cursor-pointer" onclick="focusStation('station1')">
                                <span class="text-sm">宁海某某水库</span>
                                <div class="flex items-center space-x-2">
                                    <span class="badge water-excellent">二类</span>
                                    <i class="fas fa-map-marker-alt text-blue-500"></i>
                                </div>
                            </div>
                            <div class="flex items-center justify-between p-2 bg-gray-50 rounded cursor-pointer" onclick="focusStation('station2')">
                                <span class="text-sm">某某河监测断面</span>
                                <div class="flex items-center space-x-2">
                                    <span class="badge water-good">三类</span>
                                    <i class="fas fa-map-marker-alt text-green-500"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }

        function showWaterRanking() {
            const mainContent = document.getElementById('mainContent');
            mainContent.className = 'block';
            mainContent.innerHTML = `
                <div class="card">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-gray-800">水质排行榜</h3>
                        <select class="text-sm border rounded px-2 py-1" onchange="changeRankingType(this.value)">
                            <option value="latest">最新数据</option>
                            <option value="daily">日均值</option>
                            <option value="monthly">月均值</option>
                        </select>
                    </div>
                    <div class="space-y-3">
                        <div>
                            <h4 class="font-medium text-gray-700 mb-2">优秀水质（一、二类）</h4>
                            <div class="space-y-2">
                                <div class="flex items-center space-x-3 p-3 bg-blue-50 rounded-lg">
                                    <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
                                        <span class="text-white font-bold text-sm">1</span>
                                    </div>
                                    <div class="flex-1">
                                        <div class="font-medium">宁海某某水库</div>
                                        <div class="text-sm text-gray-500">跃龙街道 | 湖库型</div>
                                    </div>
                                    <span class="badge water-excellent">二类</span>
                                </div>
                                <div class="flex items-center space-x-3 p-3 bg-blue-50 rounded-lg">
                                    <div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
                                        <span class="text-white font-bold text-sm">2</span>
                                    </div>
                                    <div class="flex-1">
                                        <div class="font-medium">某某水源地</div>
                                        <div class="text-sm text-gray-500">桃源街道 | 饮用水源</div>
                                    </div>
                                    <span class="badge water-excellent">一类</span>
                                </div>
                            </div>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-700 mb-2">良好水质（三类）</h4>
                            <div class="space-y-2">
                                <div class="flex items-center space-x-3 p-3 bg-green-50 rounded-lg">
                                    <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
                                        <span class="text-white font-bold text-sm">1</span>
                                    </div>
                                    <div class="flex-1">
                                        <div class="font-medium">某某河监测断面</div>
                                        <div class="text-sm text-gray-500">桃源街道 | 河流型</div>
                                    </div>
                                    <span class="badge water-good">三类</span>
                                </div>
                            </div>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-700 mb-2">需关注水质（四类及以下）</h4>
                            <div class="space-y-2">
                                <div class="flex items-center space-x-3 p-3 bg-yellow-50 rounded-lg">
                                    <div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center">
                                        <span class="text-white font-bold text-sm">!</span>
                                    </div>
                                    <div class="flex-1">
                                        <div class="font-medium">某某河下游断面</div>
                                        <div class="text-sm text-gray-500">长街镇 | 河流型</div>
                                    </div>
                                    <span class="badge water-light">四类</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }

        function showComplianceRate() {
            const mainContent = document.getElementById('mainContent');
            mainContent.className = 'block';
            mainContent.innerHTML = `
                <div class="card">
                    <h3 class="font-semibold text-gray-800 mb-4">水质达标率统计</h3>
                    <div class="space-y-6">
                        <div>
                            <div class="flex items-center justify-between mb-3">
                                <h4 class="font-medium text-gray-700">饮用水源地达标率</h4>
                                <span class="text-sm text-gray-500">目标：一、二类水质</span>
                            </div>
                            <div class="bg-gray-200 rounded-full h-3 mb-2">
                                <div class="bg-blue-500 h-3 rounded-full" style="width: 90%"></div>
                            </div>
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-gray-600">达标水源地：9/10</span>
                                <span class="font-medium text-blue-600">90.0%</span>
                            </div>
                        </div>
                        <div>
                            <div class="flex items-center justify-between mb-3">
                                <h4 class="font-medium text-gray-700">地表水达标率</h4>
                                <span class="text-sm text-gray-500">目标：三类及以上</span>
                            </div>
                            <div class="bg-gray-200 rounded-full h-3 mb-2">
                                <div class="bg-green-500 h-3 rounded-full" style="width: 92%"></div>
                            </div>
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-gray-600">达标断面：23/25</span>
                                <span class="font-medium text-green-600">92.0%</span>
                            </div>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-700 mb-3">月度趋势</h4>
                            <div class="bg-gray-100 rounded-lg h-32 flex items-center justify-center">
                                <p class="text-gray-500">达标率变化趋势图</p>
                            </div>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-700 mb-3">水质分布</h4>
                            <div class="grid grid-cols-2 gap-3">
                                <div class="text-center p-3 bg-blue-50 rounded-lg">
                                    <div class="text-2xl font-bold text-blue-600">60%</div>
                                    <div class="text-sm text-gray-600">优秀水质</div>
                                </div>
                                <div class="text-center p-3 bg-green-50 rounded-lg">
                                    <div class="text-2xl font-bold text-green-600">32%</div>
                                    <div class="text-sm text-gray-600">良好水质</div>
                                </div>
                                <div class="text-center p-3 bg-yellow-50 rounded-lg">
                                    <div class="text-2xl font-bold text-yellow-600">6%</div>
                                    <div class="text-sm text-gray-600">轻度污染</div>
                                </div>
                                <div class="text-center p-3 bg-orange-50 rounded-lg">
                                    <div class="text-2xl font-bold text-orange-600">2%</div>
                                    <div class="text-sm text-gray-600">中度污染</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }

        function showWaterMap() {
            const mainContent = document.getElementById('mainContent');
            mainContent.className = 'block';
            mainContent.innerHTML = `
                <div class="card">
                    <h3 class="font-semibold text-gray-800 mb-4">实时水质地图</h3>
                    <div class="bg-gray-100 rounded-lg h-64 flex items-center justify-center">
                        <div class="text-center">
                            <i class="fas fa-map text-4xl text-gray-400 mb-2"></i>
                            <p class="text-gray-500">水质地图加载中...</p>
                            <p class="text-sm text-gray-400 mt-2">根据水质等级显示不同颜色</p>
                        </div>
                    </div>
                    <div class="mt-4">
                        <h4 class="font-medium text-gray-700 mb-2">实时水质状况</h4>
                        <div class="space-y-2">
                            <div class="flex items-center justify-between p-2 bg-blue-50 rounded">
                                <div class="flex items-center space-x-2">
                                    <div class="w-3 h-3 bg-blue-500 rounded-full"></div>
                                    <span class="text-sm">宁海某某水库</span>
                                </div>
                                <span class="badge water-excellent">二类</span>
                            </div>
                            <div class="flex items-center justify-between p-2 bg-green-50 rounded">
                                <div class="flex items-center space-x-2">
                                    <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                                    <span class="text-sm">某某河监测断面</span>
                                </div>
                                <span class="badge water-good">三类</span>
                            </div>
                            <div class="flex items-center justify-between p-2 bg-yellow-50 rounded">
                                <div class="flex items-center space-x-2">
                                    <div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
                                    <span class="text-sm">某某河下游断面</span>
                                </div>
                                <span class="badge water-light">四类</span>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }

        function viewStationDetail(stationId) {
            const mainContent = document.getElementById('mainContent');
            mainContent.className = 'block';
            mainContent.innerHTML = `
                <div class="card">
                    <h3 class="font-semibold text-gray-800 mb-4">监测站点详情</h3>
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-medium text-gray-700 mb-2">基本信息</h4>
                            <div class="grid grid-cols-2 gap-3 text-sm">
                                <div>站点名称：宁海某某水库</div>
                                <div>站点编码：NH-WQ-001</div>
                                <div>所属地区：宁海县</div>
                                <div>乡镇街道：跃龙街道</div>
                                <div>控制级别：国控</div>
                                <div>水体类型：湖库型</div>
                                <div>经度：121.4258°</div>
                                <div>纬度：29.2946°</div>
                            </div>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-700 mb-2">最新监测数据</h4>
                            <div class="grid grid-cols-2 gap-3">
                                <div class="p-3 bg-green-50 rounded-lg">
                                    <div class="text-lg font-bold text-green-600">7.2</div>
                                    <div class="text-sm text-gray-600">pH值 (正常范围)</div>
                                </div>
                                <div class="p-3 bg-blue-50 rounded-lg">
                                    <div class="text-lg font-bold text-blue-600">8.5</div>
                                    <div class="text-sm text-gray-600">溶解氧 (mg/L)</div>
                                </div>
                                <div class="p-3 bg-cyan-50 rounded-lg">
                                    <div class="text-lg font-bold text-cyan-600">12.8</div>
                                    <div class="text-sm text-gray-600">水温 (℃)</div>
                                </div>
                                <div class="p-3 bg-gray-50 rounded-lg">
                                    <div class="text-lg font-bold text-gray-600">285</div>
                                    <div class="text-sm text-gray-600">电导率 (μS/cm)</div>
                                </div>
                                <div class="p-3 bg-yellow-50 rounded-lg">
                                    <div class="text-lg font-bold text-yellow-600">2.5</div>
                                    <div class="text-sm text-gray-600">浊度 (NTU)</div>
                                </div>
                                <div class="p-3 bg-green-50 rounded-lg">
                                    <div class="text-lg font-bold text-green-600">0.15</div>
                                    <div class="text-sm text-gray-600">氨氮 (mg/L)</div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-700 mb-2">水质评价</h4>
                            <div class="p-3 bg-blue-50 rounded-lg">
                                <div class="flex items-center justify-between">
                                    <span class="font-medium">综合水质类别</span>
                                    <span class="badge water-excellent">二类水质</span>
                                </div>
                                <div class="mt-2 text-sm text-gray-600">
                                    根据单因子评价法，该站点水质达到二类标准，水质状况优秀，符合饮用水源地要求。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }

        function showTrend(stationId) {
            const mainContent = document.getElementById('mainContent');
            mainContent.className = 'block';
            mainContent.innerHTML = `
                <div class="card">
                    <h3 class="font-semibold text-gray-800 mb-4">水质变化趋势</h3>
                    <div class="mb-4">
                        <div class="flex space-x-2">
                            <button class="btn btn-primary text-sm px-3 py-1">24小时</button>
                            <button class="btn btn-outline text-sm px-3 py-1">7天</button>
                            <button class="btn btn-outline text-sm px-3 py-1">30天</button>
                        </div>
                    </div>
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-medium text-gray-700 mb-2">水质类别变化</h4>
                            <div class="bg-gray-100 rounded-lg h-32 flex items-center justify-center">
                                <p class="text-gray-500">水质类别趋势图</p>
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-3">
                            <div>
                                <h5 class="font-medium text-gray-700 mb-2">氨氮变化</h5>
                                <div class="bg-gray-100 rounded-lg h-24 flex items-center justify-center">
                                    <p class="text-gray-500 text-sm">氨氮趋势</p>
                                </div>
                            </div>
                            <div>
                                <h5 class="font-medium text-gray-700 mb-2">总磷变化</h5>
                                <div class="bg-gray-100 rounded-lg h-24 flex items-center justify-center">
                                    <p class="text-gray-500 text-sm">总磷趋势</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }

        function focusStation(stationId) {
            showNotification('定位到监测站点', 'info');
        }

        function changeRankingType(type) {
            showNotification('更新排名数据', 'info');
        }

        // 弹窗显示函数
        function showGISMapModal() {
            document.getElementById('gisMapModal').classList.add('show');
        }

        function showWaterRankingModal() {
            document.getElementById('waterRankingModal').classList.add('show');
        }

        function showComplianceRateModal() {
            document.getElementById('complianceRateModal').classList.add('show');
        }

        function showWaterMapModal() {
            document.getElementById('waterMapModal').classList.add('show');
        }

        // 弹窗关闭函数
        function closeModal(modalId) {
            document.getElementById(modalId).classList.remove('show');
        }

        // 弹窗交互函数
        function exportMapData() {
            showNotification('正在导出地图数据...', 'success');
        }

        function exportRankingData() {
            showNotification('正在导出排名数据...', 'success');
        }

        function exportComplianceData() {
            showNotification('正在导出达标率数据...', 'success');
        }

        function exportWaterMapData() {
            showNotification('正在导出水质地图数据...', 'success');
        }

        // 点击弹窗外部关闭
        document.addEventListener('DOMContentLoaded', function() {
            const modals = document.querySelectorAll('.modal-overlay');
            modals.forEach(modal => {
                modal.addEventListener('click', function(e) {
                    if (e.target === modal) {
                        modal.classList.remove('show');
                    }
                });
            });
        });

        function showNotification(message, type = 'info') {
            const colors = {
                success: 'bg-green-500',
                warning: 'bg-yellow-500',
                danger: 'bg-red-500',
                info: 'bg-blue-500'
            };
            
            const notification = document.createElement('div');
            notification.className = `fixed top-4 left-4 right-4 ${colors[type]} text-white p-3 rounded-lg shadow-lg z-50`;
            notification.innerHTML = `
                <div class="flex items-center">
                    <i class="fas fa-info-circle mr-2"></i>
                    <span>${message}</span>
                </div>
            `;
            document.body.appendChild(notification);
            
            setTimeout(() => {
                notification.remove();
            }, 3000);
        }
    </script>
</body>
</html>